import { Chart } from "@antv/g2";

import { useEffect } from "react";

// 漏斗图
const Funnel=()=>{
useEffect(()=>{
    const chart = new Chart({
        container: 'funnel',
        autoFit: true,
        height: 500,
        width:400
      });
      chart.options({
        type: "interval",
  autoFit: true,
  paddingRight: 80,
  data: {
    type: "inline",
    value: [
      { action: "浏览网站", pv: 50000 },
      { action: "放入购物车", pv: 35000 },
      { action: "生成订单", pv: 25000 },
      { action: "支付订单", pv: 15000 },
      { action: "完成交易", pv: 8000 },
    ],
    transform: [
      {
        type: "custom",
        callback: (data:any) =>
          data.map((d:any) => ({
            ...d,
            rate: d.pv / data[0].pv,
          })),
      },
    ],
  },
  encode: { x: "action", y: "pv", color: "action", shape: "pyramid" },
  transform: [{ type: "symmetryY" }],
  scale: { x: { padding: 0 } },
  coordinate: { transform: [{ type: "transpose" }] },
  animate: { enter: { type: "fadeIn" } },
  axis: false,
  legend: { color: { position: "bottom" } },
  labels: [
    { text: (d:any) => `${d.action} ${d.pv}`, textAlign: "left" },
    {
      text: (d:any) => `${(d.rate * 100).toFixed(1)}%`,
      position: "inside",
      transform: [{ type: "contrastReverse" }],
    },
  ],
      })
      chart.render();
},[])

    return (
        <div id="funnel"></div>
    )
}

export default Funnel;